<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>图形</title>
  <style>
    /* 简单设置柱状图容器和柱子的样式 */
   .bar-chart {
      width: 300px;
      height: 200px;
      border: 1px solid #ccc;
      margin-bottom: 10px;
    }

   .bar {
      width: 30px;
      margin: 10px 5px;
      background-color: blue;
      transition: height 0.5s ease; /* 添加过渡效果用于动画展示 */
      display: inline-block;
    }
  </style>
</head>

<body>
  <button id="updateButton">更新数据</button>
  <div class="bar-chart" id="barChart">
    <!-- 这里后续通过JavaScript动态添加柱子 -->
  </div>
</body>
<script>
window.onload = function () {
  const initialData = [150, 100, 30,50,70]; // 初始数据
  const barChart = document.getElementById('barChart');
  const updateButton = document.getElementById('updateButton');

  // 根据初始数据绘制柱状图
  function drawChart(data) {
    barChart.innerHTML = ''; // 先清空之前的柱子
    data.forEach((height, index) => {
      const bar = document.createElement('div');
      bar.className = 'bar';
      bar.style.height = height + 'px';
      barChart.appendChild(bar);
    });
  }

  drawChart(initialData);

  // 点击更新按钮的处理函数
  updateButton.onclick = function () {
    const newDataStr = prompt('请输入新的数据,以逗号分隔(例如:15,25,35)');
    if (newDataStr) {
      const newData = newDataStr.split(',').map(Number);
      updateChart(initialData, newData);
    }
  };

  // 更新图表数据并展示动画效果的函数
  function updateChart(oldData, newData) {
    const bars = barChart.querySelectorAll('.bar');
    const maxLength = Math.max(oldData.length, newData.length);
    for (let i = 0; i < maxLength; i++) {
      const oldHeight = oldData[i] || 0;
      const newHeight = newData[i] || 0;
      const bar = bars[i] || document.createElement('div');
      bar.className = 'bar';
      bar.style.height = oldHeight + 'px';
      if (!bars[i]) {
        barChart.appendChild(bar);
      }
      setTimeout(() => {
        bar.style.height = newHeight + 'px';
      }, 100 * i); // 依次延迟一点时间来展示动画效果，可根据实际调整间隔时间
    }
    initialData.length = 0;
    initialData.push(...newData);
  }
};
</script>
</html>
